<template>
  <div>
    <table frame="border" rules="all">
      <div v-for="(colItemArr, index) in options" :key="index">
        <tr>
          <th v-for="(colItem, index2) in colItemArr" :key="index2">
            {{ colItem.id }}
          </th>
        </tr>

        <tr>
          <td
            align="center"
            :class="{
              openTD: !colItem.open,
            }"
            style="position: relative;"
            v-for="(colItem, index2) in colItemArr"
            :key="index2"
            :colspan="colItem.colSpan"
            v-show="colItem.show"
          >
            <i
              v-if="updateData.selectTD.includes(colItem.id)"
              class="el-icon-success"
              style="
                position: absolute;
                top: 6px;
                right: 6px;
                font-size: 16px;
                color: green;
              "
            ></i>
            <img
              v-if="!colItem.open"
              src="../../assets/images/disabled.png"
              alt=""
              srcset=""
              @click="clickTd(colItem)"
            />
            <div v-if="colItem.open" class="tdDiv" @click="clickTd(colItem)" :class="{'td-class1': colItem.textClass == '1',
              'td-class2': colItem.textClass == '2',
              'td-class3': colItem.textClass == '3',
              'td-class4': colItem.textClass == '4',
              'td-class5': colItem.textClass == '5',
              'td-class6': colItem.textClass == '6',}">
              <i
                v-if="colItem.icon == 'el-icon-star-on'"
                class="el-icon-star-on"
              ></i>
              <i
                v-if="colItem.icon == 'el-icon-s-flag'"
                class="el-icon-s-flag"
              ></i>
              <i
                v-if="colItem.icon == 'el-icon-question'"
                class="el-icon-question"
              ></i>
              {{ colItem.text }}
            </div>
          </td>
        </tr>
      </div>
    </table>

    <div class="do" v-if="updateData.selectTD && updateData.selectTD.length">
      <div class="cell-item">
        选中端口: {{ updateData.selectTD.join('、') }}
      </div>
      <div class="cell-item">
        端口可用:
        <el-switch
          style="margin-left: 10px;"
          v-model="updateData.open"
          active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
      </div>
      <div class="cell-item" v-show="updateData.open">
        <div class="cell-title">文字标记:</div>
        <el-input v-model="updateData.text" placeholder="请输入内容"></el-input>
      </div>
      <div class="cell-item" v-show="updateData.open">
        图标:
        <i
          :class="{ selectIcon: updateData.icon == 'el-icon-star-on' }"
          class="el-icon-star-on"
          @click="setIcon('el-icon-star-on')"
        ></i>
        <i
          class="el-icon-s-flag"
          :class="{ selectIcon: updateData.icon == 'el-icon-s-flag' }"
          @click="setIcon('el-icon-s-flag')"
        ></i>
        <i
          class="el-icon-question"
          :class="{ selectIcon: updateData.icon == 'el-icon-question' }"
          @click="setIcon('el-icon-question')"
        ></i>
      </div>
      <div class="cell" v-show="updateData.open">
        <div>选择样式:</div>
        <div
          class="td-class1-select"
          :class="{
            'td-class-active': updateData.textClass == '1',
          }"
          @click="setClass('1')"
        >
          文字
        </div>
        <div
          class="td-class2-select"
          :class="{
            'td-class-active': updateData.textClass == '2',
          }"
          @click="setClass('2')"
        >
          文字
        </div>
        <div
          class="td-class3-select"
          :class="{
            'td-class-active': updateData.textClass == '3',
          }"
          @click="setClass('3')"
        >
          文字
        </div>
        <div
          class="td-class4-select"
          :class="{
            'td-class-active': updateData.textClass == '4',
          }"
          @click="setClass('4')"
        >
          文字
        </div>
        <div
          class="td-class5-select"
          :class="{
            'td-class-active': updateData.textClass == '5',
          }"
          @click="setClass('5')"
        >
          文字
        </div>
        <div
          class="td-class6-select"
          :class="{
            'td-class-active': updateData.textClass == '6',
          }"
          @click="setClass('6')"
        >
          文字
        </div>
      </div>
      <div class="cell">
        <el-button type="primary" @click="up">更新上去</el-button>
        <el-button @click="clearItem">清除</el-button>
      </div>
    </div>
    <div class="save-all" v-if="!updateData.selectTD.length">
      <el-button type="primary" @click="saveAll">保存全部端口</el-button>
      <el-button @click="reLoad">恢复</el-button>
    </div>
  </div>
</template>

<script>
import {
  updateFrame,
} from '@/api/distributionframe/frame'
export default {
  props: ['frameData'],
  data() {
    return {
      options: [],
      updateData: {
        selectTD: [],
        open: true,
        icon: '',
        text: '',
        textClass: '',
      },
    }
  },
  created() {},
  mounted() {
    this.options = [...JSON.parse(this.frameData.portGroupData)]
    // this.createTable(this.frameData.portLine, this.frameData.portColumn)
  },
  methods: {
    saveAll(){
      let obj = {...this.frameData}
      obj.portGroupData = JSON.stringify(this.options) 

      updateFrame(obj).then((response) => {
        this.msgSuccess('端口保存成功')
      })
    },
    reLoad(){
      this.$nextTick(()=>{
        this.options = [...JSON.parse(this.frameData.portGroupData)]
      })
    },
    clickTd(item) {
      // console.log(item)
      if (this.updateData.selectTD.includes(item.id)) {
        //选择的td里有这个值 去掉它
        // this.updateData.selectTD = this.updateData.selectTD.filter((r) => {
        //   return r != item.id
        // })
        this.updateData.selectTD = this.updateData.selectTD.filter(function(item1) {
            return item.group.every(function(item2) {
                return item2 != item1
            })
        })
      } else {
        if (!item.open || item.text || item.icon || item.textClass) {
          // 判断关闭的td 有值的td 直接把值带过来 不进行多选操作
          let optionsArr = []
          this.options.forEach(element=>{
            element.forEach(e=>{
              optionsArr.push(e)
            })
          })
          let optArr = optionsArr.filter(opt=>{return opt.groupAll == item.groupAll})
          // console.log(optArr);
          let arr = []
          if(optArr && optArr.length){
            optArr.forEach(e=>{
              arr.push(e.id)
            })
          }
          // arr.push(item.id)
            this.updateData.selectTD = [...arr]
          this.updateData.open = item.open
          this.updateData.icon = item.icon
          this.updateData.text = item.text
          this.updateData.textClass = item.textClass
        } else {
          if (
            this.updateData.selectTD.length == 1 &&
            (!this.getItemByNo(this.updateData.selectTD[0]).open)
          ) {
            this.updateData.selectTD = []
          }
          this.updateData.selectTD.push(item.id)
          this.updateData.selectTD.sort(function (a, b) {
            return a - b
          })
        }
      }
    },
    arrayGroup(arr) {
      let result = [],i = 0
      const list = arr.sort((a, b) => a - b)

      list.forEach((item, index) => {
        if (index === 0) {
          result[0] = [item]
        } else if (Number(item) - Number(list[index - 1]) == 1) {
          // 判断数字是否连续
          if((Number(item)-1)%Number(this.frameData.portColumn)==0){
            //判断是否新起一行
            result[++i] = [item] // 开辟新空间。
          }else{
            result[i].push(item)
          }
        } else {
          result[++i] = [item] // 开辟新空间。
        }
      })
      return result
    },
    getItemByNo(no) {
      let allArr = []
      this.options.forEach((e) => {
        e.forEach((itemE) => {
          allArr.push(itemE)
        })
      })
      let item = allArr.filter((res) => {
        return res.id == no
      })
      // console.log(allArr)
      return item[0]
    },
    clearItem(){
      this.$forceUpdate()
      //清除一块TD
      this.updateData.open= true;
      this.updateData.icon= '';
      this.updateData.text= '';
      this.updateData.textClass= '';

      //up方法
      let optionsArr = []
      let groupArr = this.arrayGroup(this.updateData.selectTD)
      this.options.forEach(element=>{
        element.forEach(e=>{
          optionsArr.push(e)
        })
      })
      // console.log(optionsArr);
      groupArr.forEach(ga=>{
        ga.forEach((it,index)=>{
          let i = (Number(it)-1)
          optionsArr[i].open = this.updateData.open
          if(this.updateData.open){
            optionsArr[i].colSpan =  1
            optionsArr[i].icon = this.updateData.icon || ''
            optionsArr[i].text = this.updateData.text || ''
            optionsArr[i].textClass = this.updateData.textClass || ''
            optionsArr[i].group =  [it]
            optionsArr[i].groupAll = this.guid()
            optionsArr[i].show = true
          }else{
            optionsArr[i].colSpan = 1
            optionsArr[i].show = true
            optionsArr[i].icon = ''
            optionsArr[i].text = ''
            optionsArr[i].textClass = ''
            optionsArr[i].group = [it]
            optionsArr[i].groupAll = this.guid()
          }
        })
      })
      let no = 0
      let arr = []
      for (let l = 0; l < this.frameData.portLine; l++) {
        let colList = []
        for (let c = 0; c < this.frameData.portColumn; c++) {
          colList.push({
            id: no+1,
            text: optionsArr[no].text,
            open: optionsArr[no].open,
            icon: optionsArr[no].icon,
            textClass: optionsArr[no].textClass,
            show: optionsArr[no].show,
            colSpan: optionsArr[no].colSpan,
            group: optionsArr[no].group,
            groupAll:optionsArr[no].groupAll,
          })
          no++
        }
        arr.push(colList)
      }
        this.options = [...arr]
      this.updateData = {
        selectTD: [],
        open: true,
        icon: '',
        text: '',
        textClass: '',
      }
    },
    up() {
      //核心功能 更新表格 先合并表格数组 变为一个大数组 然后再拆分成数据表格
      let optionsArr = []
      let groupArr = this.arrayGroup(this.updateData.selectTD)
      this.options.forEach(element=>{
        element.forEach(e=>{
          optionsArr.push(e)
        })
      })
      let guid = this.guid()
      // console.log(optionsArr);
      groupArr.forEach(ga=>{
        ga.forEach((it,index)=>{
          let i = (Number(it)-1)
          optionsArr[i].open = this.updateData.open
          if(this.updateData.open){
            optionsArr[i].colSpan = ga.length || 1
            optionsArr[i].icon = this.updateData.icon || ''
            optionsArr[i].text = this.updateData.text || ''
            optionsArr[i].textClass = this.updateData.textClass || ''
            optionsArr[i].group = ga || []
            optionsArr[i].groupAll = guid
            if(index==0){
              optionsArr[i].show = true
            }else{
              optionsArr[i].show = false
            }
          }else{
            optionsArr[i].colSpan = 1
            optionsArr[i].show = true
            optionsArr[i].icon = ''
            optionsArr[i].text = ''
            optionsArr[i].textClass = ''
            optionsArr[i].group = []
            optionsArr[i].groupAll = ''
          }
        })
      })
      let no = 0
      let arr = []
      for (let l = 0; l < this.frameData.portLine; l++) {
        let colList = []
        for (let c = 0; c < this.frameData.portColumn; c++) {
          colList.push({
            id: no+1,
            text: optionsArr[no].text,
            open: optionsArr[no].open,
            icon: optionsArr[no].icon,
            textClass: optionsArr[no].textClass,
            show: optionsArr[no].show,
            colSpan: optionsArr[no].colSpan,
            group: optionsArr[no].group,
            groupAll: optionsArr[no].groupAll,
          })
          no++
        }
        arr.push(colList)
      }
      this.$nextTick(()=>{
        this.options = [...arr]
      })
      this.updateData = {
        selectTD: [],
        open: true,
        icon: '',
        text: '',
        textClass: '',
      }
    },
    setIcon(iconName) {
      //设置图标
      if (this.updateData.icon == iconName) {
        this.updateData.icon = ''
        return
      }
      this.updateData.icon = iconName
    },
    setClass(className) {
      //设置样式
      if (this.updateData.textClass == className) {
        this.updateData.textClass = ''
        return
      }
      this.updateData.textClass = className
    },
    createTable(line, col) {
      // 生成空白表格
      let no = 1
      let arr = []
      for (let l = 0; l < line; l++) {
        let colList = []
        for (let c = 0; c < col; c++) {
          colList.push({
            id: no,
            text: '',
            open: true,
            icon: '',
            textClass: '',
            show: true,
            colSpan: 1,
            group: [no],
            groupAll: this.guid()
          })
          no++
        }
        arr.push(colList)
      }
      // console.log(arr)
      this.options = [...arr]
    },
    guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
  },
}
</script>

<style scoped lang="scss">
.save-all{
  display: flex;
  margin-top: 15px;
  padding-left: 20px;
}
.do {
  margin-top: 20px;
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  .cell-item {
    width: 400px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    .cell-title {
      width: 80px;
    }
    i {
      font-size: 25px;
      margin-left: 10px;
    }
  }
  .cell {
    width: 100%;
    padding: 10px 20px;
    display: flex;
  }
}
table{
  table-layout: fixed;
}
td {
  width: 80px;
  max-width: 80px;
  min-width: 80px;
  height: 50px;
  vertical-align: middle;
  word-break: break-all; word-wrap:break-word;
}
th {
  width: 80px;
  max-width: 80px;
  min-width: 80px;
  height: 30px;
  background: rgb(243, 243, 243);
  color: rgb(166, 166, 166);
  line-height: 30px;
}
.openTD {
  // pointer-events: none;
  img {
    height: 100%;
    width: 100%;
    // margin-left: 10px;
  }
}

.selectIcon {
  color: rgb(255, 90, 0);
}

.td-class1 {
  color: rgb(255, 90, 0);
  background: rgb(255, 236, 206);
  &-select {
    color: rgb(255, 90, 0);
    background: rgb(255, 236, 206);
    border: 2px solid rgb(215, 215, 215);
    padding: 9px 12px;
    margin-left: 12px;
    cursor: pointer;
  }
}
.td-class2 {
  color: rgb(62, 156, 255);
  background: rgb(230, 245, 255);
  &-select {
    color: rgb(62, 156, 255);
    background: rgb(230, 245, 255);
    border: 2px solid rgb(215, 215, 215);
    padding: 9px 12px;
    margin-left: 12px;
    cursor: pointer;
  }
}
.td-class3 {
  color: rgb(200, 64, 255);
  background: rgb(244, 230, 255);
  &-select {
    color: rgb(200, 64, 255);
    background: rgb(244, 230, 255);
    border: 2px solid rgb(215, 215, 215);
    padding: 9px 12px;
    margin-left: 12px;
    cursor: pointer;
  }
}
.td-class4 {
  color: rgb(255, 95, 64);
  background: rgb(255, 252, 230);
  &-select {
    color: rgb(255, 95, 64);
    background: rgb(255, 252, 230);
    border: 2px solid rgb(215, 215, 215);
    padding: 9px 12px;
    margin-left: 12px;
    cursor: pointer;
  }
}
.td-class5 {
  color: rgb(64, 152, 255);
  background: rgb(237, 255, 230);
  &-select {
    color: rgb(64, 152, 255);
    background: rgb(237, 255, 230);
    border: 2px solid rgb(215, 215, 215);
    padding: 9px 12px;
    margin-left: 12px;
    cursor: pointer;
  }
}
.td-class6 {
  color: rgb(255, 64, 68);
  background: rgb(255, 230, 231);
  &-select {
    color: rgb(255, 64, 68);
    background: rgb(255, 230, 231);
    border: 2px solid rgb(215, 215, 215);
    padding: 9px 12px;
    margin-left: 12px;
    cursor: pointer;
  }
}
.td-class-active {
  border-color: rgb(217, 0, 27);
}
.tdDiv {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
